<template>
	<view :style="{ '--colorPrimary': color.primary }">
		<b-panel-title icon="icon-dengdaifahuo" :title="$t('交货方式')">
			<u-cell :border="false">
				<view slot="label">
					<view class="pastmans">
						<view
							class="item pd-right-10 pd-left-10 pd-top-5 pd-bottom-5 mg-left-10 mg-right-10 br-rd-30 font-size-12"
							v-for="(item,index) in postmans" :class="postmanSelected==item.id?'active':''" :style="{backgroundColor: postmanSelected==item.id ?color.primary:backgroundColor }"
							@click="onSelectedPost(item)">
							{{$t(item.name)}}
						</view>
					</view>
				</view>
			</u-cell>
			<view class="bg-white br-rd-10  font-size-12">
				<u-cell isLink @click="open()">
					<view slot="title" class=" font-size-12">
						<text>{{$t('收货人')}}</text>:<text>{{item.name}}</text>
					</view>
					<view slot="value">
						<text class="font-size-12">{{item.phoneNumber}}</text>
					</view>
					<view slot="label">
						<text class="label font-size-12">{{item.address}} {{item.addressInfo?item.addressInfo:''}}</text>
					</view>
				</u-cell>
			</view>
		</b-panel-title>

		<u-action-sheet round="10" :closeOnClickOverlay="true" :cancelText="$t('取消')" :title="$t('选择地址')"
			:closeOnClickAction="true" :show="show" @close="close" :closeable="true">
			<view class="" style="text-align: justify;">
				<b-address-selected v-if="postmanSelected==0" @action="getAction" />
				<b-address-shop v-if="postmanSelected==1" @action="getAction" />
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				item: {
					name: "",
					phoneNumber: "",
					address: "",
					addressInfo: ""
				},
				postmanSelected: 0,
				postmans: [{
					id: 0,
					name: "快递发货"
				}, {
					id: 1,
					name: "到店取件"
				}]
			}
		},
		methods: {
			getAction: function(item, flag) {
				this.item = item;
				if (flag) {
					this.show = false
				}
				this.$emit("action", item)
			},

			open() {
				// console.log('open');
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			onSelectedPost: function(item) {
				this.postmanSelected = item.id
				this.$emit("actionType", item)
			}
		}
	}
</script>

<style lang="scss">
	.label {
		font-size: 14px;
		color: darkgray;
	}

	.pastmans {
		display: flex;

		.item {
			background-color: #fff;

			&.active {
				background-color: var(--color-primary);
				color: #fff;
			}
		}
	}
</style>